<template>

  <!-- 提示框  信息不完整 -->
  <div class="q-pa-md q-gutter-sm">
    <q-dialog
        v-model="box.isErrRow"
        persistent
        transition-show="scale"
        transition-hide="scale"
    >
      <q-card class="bg-teal text-white" style="width: 300px">
        <q-card-section>
          <div class="text-h6">提示</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          {{ box.errRowData }}
        </q-card-section>

        <q-card-actions align="right" class="bg-white text-teal">
          <q-btn flat label="OK" v-close-popup/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>

  <!-- 提示框  内容错误-->
  <q-dialog v-model="box.boxDialog" position="top">
    <q-card class="bg-pink text-white" style="width: 300px">
      <q-card-section>
        <div class="text-h6">提示</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        请确认格式是否输入正确.
      </q-card-section>
      <!-- <q-linear-progress :value="0.7" color="orange" /> -->
      <q-card-actions align="right" class="bg-white text-teal">
        <div></div>
        <div v-show="true">
          <div class="text-h8 text-grey">例如:（木箱） 300*280*290</div>
          <div class="text-grey">例如:（托盘） 300*290</div>
          <div class="text-grey">可以开启或关闭智能提示</div>
          <div class="text-grey">
            开启智能提示时,输入数量后会自动关闭当前提示框.
          </div>
        </div>
        <q-btn
            flat
            color="primary"
            @click="!box.isDialog"
            label="OK"
            v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>

  <!-- 提示框  添加成功-->
  <q-dialog v-model="box.succeed" position="top">
    <q-card class="bg-primary text-white" style="width: 300px">
      <q-card-section>
        <div class="text-h6">成功提示</div>
      </q-card-section>

      <!-- <q-linear-progress :value="0.7" color="orange" /> -->
      <q-card-actions align="right" class="bg-white text-teal">
        <div></div>
        <div v-show="true">
          <div class="text-h8">成功添加了{{ box.succeedCount }}条记录 ！~</div>
        </div>
        <q-btn
            flat
            color="primary"
            @click="!box.isDialog"
            label="OK"
            v-close-popup
        />
      </q-card-actions>
    </q-card>
  </q-dialog>


  <!-- 智能实时库存 卡片     <q-scroll-area style="height: 200px; max-width: 300px;">    -->
  <div class="q-gutter-md row ">
    <q-scroll-area
        class="my-card justify-around"
        v-show="box.isPrompts"
        style="position: absolute; z-index: 1"
    >
      <q-table
          grid-header
          dense
          flat
          bordered
          square
          :rows="computedData"
          :columns="StockReportColumns"
          row-key="name"
          hide-bottom
          hide-no-data
          :table-header-style="{ backgroundColor: '#80CBC4' }"
          :card-style="{ backgroundColor: '#ECEFF1' }"
      />


    </q-scroll-area>
  </div>


  <div class="column" style="height: 100%">
    <div style="height: 15px"></div>
    <!-- 表头部分 -->
    <div class="col-1">

      <!-- 表头的输入框和按键 -->
      <q-card flat>
        <!-- 输入框部分 -->
        <div class="q-gutter-md row justify-around">
          <div class="col-0" v-show="!box.isSure"></div>
          <q-chip
              v-show="box.isSure"
              dense
              size="lg"
              color="blue-grey-10"
              text-color="white"
          >已审核
          </q-chip>


          <q-select v-model.trim="box.yesExport"
                    type="text" hint="内销/外销"  style="width: 150px" :options="box.yesExportOptions" :input-style="{ backgroundColor: '#ff0000' }" :popup-content-style="{ backgroundColor: '##F06292' }" >
            <template v-slot:append>
              <q-icon
                  :name="
                  box.yesExport == '外销' ? 'directions_boat' : 'local_shipping'
                "
                  size="80%"
              />
            </template>
          </q-select>




          <q-input
              v-model.trim="box.customerPurchaseOrderId"
              type="text"
              hint="自定义订单号"
          >
            <template v-slot:append>
              <q-icon name="gesture" size="80%"/>
            </template>
          </q-input>


          <q-select v-model.trim="box.supplierName" type="text" hint="供应商"  style="width: 150px" :options="box.supplierOptions" :input-style="{ backgroundColor: '#ff0000' }" :popup-content-style="{ backgroundColor: '##F06292' }" >
            <template v-slot:append>
              <q-icon name="person" size="80%"/>
            </template>
          </q-select>


          <q-input
              v-model.trim="box.purchaseOrderId"
              type="text"
              hint="采购订单号"
              disable
          >
            <template v-slot:append>
              <q-icon name="view_stream" size="80%"/>
            </template>
          </q-input>
          <q-input v-model="box.planDate" type="date" hint="计划交期"/>
          <div class="col-0"></div>
        </div>

        <!-- 操作栏 -->
        <div style="height: 15px"></div>
        <div class="row q-gutter-md justify-around">
          <div class="q-gutter-md row items-start justify-around">
            <!-- <div   class=" q-gutter-md row justify-center ">
    <div class=" q-gutter-md  "> -->
            <q-btn-group>
              <q-btn
                  icon="chevron_left"
                  push
                  ripple
                  fab-max
                  text-color="red-10"
              />
              <q-btn
                  push
                  label="提交"
                  ripple
                  fab-max
                  text-color="red-10"
                  @click="UIinsertPurchaseOrder"
              />
              <q-btn push label="新增" ripple text-color="teal-9" @click="boxAddRows"    />
              <q-btn
                  push
                  label="审核"
                  ripple
                  fab-max
                  text-color="purple-10"
                  @click=""
              />
              <q-btn push label="打印" ripple fab-max text-color="green-10" @click="funPrintPDF"/>
              <q-btn
                  icon="chevron_right"
                  push
                  ripple
                  fab-max
                  text-color="red-10"
              />
            </q-btn-group>
          </div>

          <!-- 选择框 -->
          <div class="q-pa-md q-gutter-sm">

            <q-radio v-model="box.radio" val="A4" label="A4" color="red"/>
            <q-radio v-model="box.radio" val="A5" label="A5" color="teal"/>
<!--            <q-radio v-model="box.radio" val="A5" label="OT" color="orange"/>-->


            <!--            <q-checkbox dense v-model="box.boxIsShow" label="A4" color="red" />-->
            <!--            <q-checkbox-->
            <!--              dense-->
            <!--              v-model="box.SMRIsShow"-->
            <!--              label="A5"-->
            <!--              color="teal"-->
            <!--            />-->
            <!--            <q-checkbox-->
            <!--              dense-->
            <!--              v-model="box.trayIsShow"-->
            <!--              label="OT"-->
            <!--              color="orange"-->
            <!--            />-->
          </div>

          <!-- 单选框 style=" color:#21BA45" -->
          <div class="q-pa-md q-gutter-sm text-weight-bold">
            <q-toggle
                v-model="box.isPrompts"
                checked-icon="check"
                unchecked-icon="clear"
                color="primary"
                label="开启智能提示"
            />
          </div>
        </div>

        <!-- 间距 -->
        <div style="height: 15px"></div>
        <q-separator spaced="1px" color="#542525" inset size="6px"/>
      </q-card>
    </div>

    <!-- 表体部分 -->
    <div class="col-3">
      <!-- 表格 -->
      <q-table
          :rows="box.boxRows"
          :columns="columnsInsert"
          virtual-scroll
          hide-pagination
          :rows-per-page-options="[0]"
      >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <div class="title_font">{{ col.label }}</div>
            </q-th>
          </q-tr>
        </template>

        <!-- 表体部分 -->

        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="id" :props="props">{{ props.row.id }}</q-td>
            <!-- 产品分类 -->
            <!-- <q-td key="goodsName" :props="props">{{
              props.row.goodsName
            }}</q-td> -->

            <!-- 产品大类 -->
            <q-td key="goodsName" :props="props">
              {{ props.row.goodsName }}
              <q-popup-edit v-model="props.row.goodsName" v-slot="scope">
                <q-select
                    v-model="props.row.goodsName"
                    :options="box.goodsOptions"
                ></q-select>
              </q-popup-edit>
            </q-td>

            <!-- 产品材质 -->
<!--            <q-td key="goodsMaterial" :props="props">-->
<!--              {{ props.row.goodsMaterial }}-->
<!--              <q-popup-edit v-model="props.row.goodsMaterial" v-slot="scope">-->
<!--                <q-select-->
<!--                    v-model="props.row.goodsMaterial"-->
<!--                    :options="returnMaterialOptions(props.row)"-->
<!--                ></q-select>-->
<!--              </q-popup-edit>-->
<!--            </q-td>-->
            <!-- 产品规格   -->
            <q-td key="goodsSize" :props="props">
              {{ props.row.goodsSize }}
              <q-popup-edit v-model.trim="props.row.goodsSize" v-slot="scope">

                <q-input
                    v-model="box.goods"
                    dense
                    autofocus
                    counter
                    @keyup.enter="scope.set"
                    bottom-slots
                    @blur.native.capture="boxGoodsSizeIsNorm(props.row)"
                    @focus.passive="getGoodsName(props.row.goodsName)"
                />
              </q-popup-edit>


              <!-- <q-badge
                :color="props.row.goodsSize == '' ? Mycolor[6] : Mycolor[6]"
              >
              </q-badge> -->
            </q-td>

            <!-- 产品样式 -->
            <q-td key="goodsStyle" :props="props">
              {{ props.row.goodsStyle }}
              <q-popup-edit v-model="props.row.goodsStyle" v-slot="scope">
                <q-select
                    v-model="props.row.goodsStyle"
                    :options="returnStyleOptions(props.row)"
                ></q-select>
              </q-popup-edit>
            </q-td>

            <!-- 订购数量 -->
            <q-td key="purchaseOrderQuantity" :props="props">
              {{ props.row.purchaseOrderQuantity }}
              <q-popup-edit
                  v-model.number="props.row.purchaseOrderQuantity"
                  v-slot="scope"
              >
                <q-input
                    v-model.number="props.row.purchaseOrderQuantity"
                    dense
                    autofocus
                    counter
                    type="number"
                    @keyup.enter="scope.set"
                    @blur.native.capture="box.isHeader = false"
                />
              </q-popup-edit>
              <!-- <q-badge
                :color="
                  props.row.purchaseOrderQuantity == '' ? Mycolor[6] : Mycolor[6]
                "
              >
              </q-badge> -->
            </q-td>
            <!-- 适用产品 -->
            <q-td key="forProductName" :props="props"
            >{{ props.row.forProductName }}
              <q-popup-edit v-model="props.row.forProductName" v-slot="scope">
                <q-input
                    v-model="props.row.forProductName"
                    dense
                    autofocus
                    counter
                />
              </q-popup-edit>
            </q-td>
            <!-- 备注信息 -->
            <q-td key="customerMark" :props="props"
            >{{ props.row.purchaseOrderCustomerMark }}
              <q-popup-edit v-model="props.row.purchaseOrderCustomerMark" v-slot="scope">
                <q-input
                    v-model="props.row.purchaseOrderCustomerMark"
                    dense
                    autofocus
                    counter
                />
              </q-popup-edit>
            </q-td>
            <!-- 操作 .trim-->
            <q-td key="id" :props="props">
              <q-btn
                  icon="delete"
                  @click.stop="boxRowDelete(props.row)"
                  dense
                  flat
                  push
                  class="but_float"
              />
            </q-td>
          </q-tr>
        </template>
      </q-table>
      <!-- 表格 -->
    </div>
  </div>
</template>

<script>
import {reactive, ref, toRaw, onMounted, computed, watch} from "vue";
import {
  getStockReport,
  // getPurchaseOrderIdList,
  getMaxpurchaseOrderId,
  insertPurchaseOrder,
  purchaseOrderPrintPDF
} from "../../API/PurchaseOrder/insertPurchaseOrderAPI";
import {addAnyID} from "../../utils/goodsTools";
// import { columns } from "../../API/PurchaseOrder/defaultData";
import {columnsInsert, StockReportColumns} from "../../API/PurchaseOrder/purchaseOrderData";
import * as url from "url";

export default {
  data() {
    //获取获取当前库存量
    onMounted(function () {
      box.cards_data.length = 0;
      aa();
      // bb();
      cc();

      async function aa() {
        var res = await getStockReport();

        console.log("当前库存信息");
        console.log(res.data);
        box.cards_data = res.data;
      }

      // async function bb() {
      //   var res = await getPurchaseOrderIdList();
      //   console.log(res.data);
      //   box.purchaseOrderIdList = res.data;
      // }
      async function cc() {
        var res = await getMaxpurchaseOrderId();
        if (res.data.length > 0) {
          box.purchaseOrderId = addAnyID(res.data[0].purchaseOrderId, "PO");
        } else {
          box.purchaseOrderId = addAnyID("PO20000000000", "PO");
        }
      }
    });

    //提交订单信息
    function UIinsertPurchaseOrder() {

      // 第一步 检查信息是否输入完整
      for (let index = 0; index < toRaw(box.boxRows).length; index++) {
        if (box.yesExport == null) {
          box.isErrRow = true;
          box.errRowData = `请输入内销/外销.`;
          return;
        }
        if (box.supplierName == null||box.supplierName =="") {
          box.isErrRow = true;
          box.errRowData = `请输入供应商`;
          return;
        }
        if (box.planDate == null) {
          box.isErrRow = true;
          box.errRowData = `请输入计划交期.`;
          return;
        }
        if (toRaw(box.boxRows)[index].goodsName != ""){
        if (
            toRaw(box.boxRows)[index].goodsStyle == null ||
            toRaw(box.boxRows)[index].goodsStyle == ""
        ) {
          box.isErrRow = true;
          box.errRowData = `请输入第${index + 1}行的产品样式.`;
          return;
        }
        if (
            toRaw(box.boxRows)[index].goodsSize == null ||
            toRaw(box.boxRows)[index].goodsSize == ""
        ) {
          box.isErrRow = true;
          box.errRowData = `请输入第${index + 1}行的产品规格.`;
          return;
        }

        if (
            toRaw(box.boxRows)[index].purchaseOrderQuantity == null ||
            toRaw(box.boxRows)[index].purchaseOrderQuantity == ""
        ) {
          box.isErrRow = true;
          box.errRowData = `请输入第${index + 1}行的产品数量.`;
          return;
        }
        }
      }

      // 第二步 将表头信息加入表身的每一行.
      const boxArr = toRaw(box.boxRows).filter((val, index) => {
        val["yesExport"] = box.yesExport;
        val["customerPurchaseOrderId"] = box.customerPurchaseOrderId;
        val["supplierName"] = box.supplierName;
        val["purchaseOrderId"] = box.purchaseOrderId;
        val["planDate"] = box.planDate;
        return (
            val.goodsSize != "" &&
            val.purchaseOrderQuantity != ""
        );
      });
      // console.log(boxArr);
      let insertData = JSON.stringify(boxArr);
      console.log(insertData);
      dd(insertData);

      async function dd(insertData) {
        var res = await insertPurchaseOrder(insertData);
        console.log(res.data);
        box.succeed = true;
        box.succeedCount = res.data;
      }
    }

    //打印采购订单
    function funPrintPDF() {
      let printPart = JSON.stringify({
        "purchaseOrderId": box.purchaseOrderId,
        "PaperSize": box.radio
      });
      console.log(printPart)
      webPrint(printPart);
      let url = null

      async function webPrint(printPart) {
        var res = await purchaseOrderPrintPDF(printPart);
        console.log(res.data);
        url = res.data
        // box.succeed = true;
        // box.succeedCount =  "打印完成";
        if (url.length > 10) {
          window.open(url)
        }

      }
    }

    // 内销外销是否正确
    function yesExportIsNorm() {
      if (box.yesExport != "内销" && box.yesExport != "外销") {
        alert("只能输入‘内销’或者‘外销’不能输入其他内容！");
        box.yesExport = "";
      }
    }

    // 返回选择产品样式
    function returnStyleOptions(row) {
      // console.log(toRaw(row).goodsName );
      if (toRaw(row).goodsName == "托盘") {
        return box.trayOptions;
      } else if (toRaw(row).goodsName == "普通木箱") {
        return box.boxOptions;
      } else if (toRaw(row).goodsName == "SMR木箱") {
        return box.SMROptions;
      }
    }

    // 返回选择产品材质
    function returnMaterialOptions(row) {
      // console.log(toRaw(row).goodsName );
      if (toRaw(row).goodsName == "托盘") {
        return box.trayMaterialOptions;
      } else if (toRaw(row).goodsName == "普通木箱") {
        return box.boxMaterialOptions;
      } else if (toRaw(row).goodsName == "SMR木箱") {
        return box.SMRMaterialOptions;
      }
    }

    //对象属性
    // const isValid = computed(() => {
    //   var re = new RegExp("^[0-9]{1,4}[*]{1}[0-9]{1,4}[*]{1}[0-9]{1,4}$");
    //   console.log(re.test(box.goods));
    //   return re.test(box.goods);  //返回true 或 false
    // });
    // 监听
    watch(
        // () =>[... box.AlreadyPurchaseOrderList],
        () => box.customerPurchaseOrderId,
        (newVal,oldVal) => {
          if (newVal.substring(0,2).toUpperCase()==="NX"){
            box.yesExport ="内销"
          }else  if(newVal.substring(0,2).toUpperCase()==="WX"){
            box.yesExport ="外销"
          } else {
            box.yesExport ="其他"
          }
        } ,
        // { deep: true }  深度监听
    );


    // 智能即时库存
    const computedData = computed(() => {
      //第一步  看看是否开启了 智能提示  isPrompts
      //第二步  获取产品分类 (box SMR tray )#C2185B
      if (box.isPrompts && box.goods!=null ) {
        console.log("智能即时库存", box.goods ,box.goodsName);
        let L = box.goods.split("*")[0];
        let W = box.goods.split("*")[1];
        let H = box.goods.split("*")[2];
        box.isHeader = true;
        // console.log("计算属性被执行了");
        if (L && !W && !H) {  //用户只输入了长
          return (box.cards_data.filter((val) => {
            let   valGoodsName = val.goodsName;
            let arrBoxL = val.goodsSize.split("*")[0];
            return (
                valGoodsName === box.goodsName  &&
               Number(arrBoxL) >= Number(L) &&
                Number(arrBoxL) < Number(L) + 5

            );
          }));
        } else if (L && W && !H) {
          return (box.cards_data
              .filter((val) => {
                let   valGoodsName = val.goodsName;
                let arrBoxL = val.goodsSize.split("*")[0];

                return (
                    valGoodsName === box.goodsName  &&
                    Number(arrBoxL) >= Number(L) &&
                    Number(arrBoxL) < Number(L) + 5
                );
              })
              .filter((val) => {
                let   valGoodsName = val.goodsName;
                let arrBoxW = val.goodsSize.split("*")[1];
                return (
                    valGoodsName === box.goodsName  &&
                    Number(arrBoxW) >= Number(W) &&
                    Number(arrBoxW) < Number(W) + 5
                );
              }));
        } else {
          return (box.cards_data
              .filter((val) => {
                let   valGoodsName = val.goodsName;
                let arrBoxL = val.goodsSize.split("*")[0];

                return (
                    valGoodsName === box.goodsName  &&
                    Number(arrBoxL) >= Number(L) &&
                    Number(arrBoxL) < Number(L) + 5
                );
              })
              .filter((val) => {
                let   valGoodsName = val.goodsName;
                let arrBoxW = val.goodsSize.split("*")[1];

                return (
                    valGoodsName === box.goodsName  &&
                    Number(arrBoxW) >= Number(W) &&
                    Number(arrBoxW) < Number(W) + 5
                );
              })
              .filter((val) => {
                let   valGoodsName = val.goodsName;
                let arrBoxH = val.goodsSize.split("*")[2];
                return (
                    valGoodsName === box.goodsName  &&
                    Number(arrBoxH) >= Number(H) &&
                    Number(arrBoxH) < Number(H) + 5
                );
              }));
        }
      }

    })
// 获取焦点时触发该函数
    function getGoodsName(goodsName){
      box.goodsName =  goodsName
    }

    // 格式是否错误
    //   失去焦点出发该函数
    function boxGoodsSizeIsNorm(r) {

      console.log(toRaw(r))
      console.log("当前输入行的id__", toRaw(r).id);

      if (toRaw(r).goodsName == "普通木箱" || toRaw(r).goodsName == "SMR木箱") {
        var re = new RegExp(
            "^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$"
        );
        // 将刚在input输入的值传递给 数组
        box.boxRows[toRaw(r).id - 1].goodsSize = box.goods
        // 同时将刚在input输入的值传递给box.goodsName 用于计算属性的参数
        box.goodsName =  null
        console.log(re.test(toRaw(r).goodsSize))
        console.log(toRaw(r).goodsSize)
        if (!re.test(toRaw(r).goodsSize)) {
          box.boxDialog = !box.boxDialog;
          box.boxRows[toRaw(r).id - 1].goodsSize = "";
        }
        if (box.boxRows[box.boxRows.length - 1].goodsSize != "") {
          boxAddRows();
        }
      } else {
        // 将刚在input输入的值传递给 数组
        box.boxRows[toRaw(r).id - 1].goodsSize = box.goods
        // 同时将刚在input输入的值传递给box.goodsName 用于计算属性的参数
        box.goodsName =  null
        console.log(toRaw(r).goodsName)
        var re2 = new RegExp("^[^0][0-9]{1,4}[*]{1}[^0][0-9]{1,4}$");

        console.log(toRaw(r).goodsSize)
        console.log(re2.test(toRaw(r).goodsSize))
        if (!re2.test(toRaw(r).goodsSize)) {
          box.boxDialog = !box.boxDialog;
          box.boxRows[toRaw(r).id - 1].goodsSize = "";

        }
        if (box.boxRows[box.boxRows.length - 1].goodsSize != "") {
          boxAddRows();
        }
      }
    }

    // 增加一行
    function boxAddRows() {
      box.goods = null
      box.goodsName = null
      var map = {
        id: 0,
        goodsName: "",
        goodsMaterial: "默认",

        goodsStyle: "",
        goodsSize: "",
        purchaseOrderQuantity: "",
        forProductName: "",
        purchaseOrderCustomerMark: "",
      };
      map.id = box.boxRows[box.boxRows.length - 1].id + 1;
      // map.id = box.boxRows.length + 1;
      box.boxRows.push(map);
    }

    // 删除一行
    function boxRowDelete(row) {
      if (box.boxRows.length > 1) {
        box.boxRows.splice(toRaw(row).id - 1, 1);
        box.boxRows.forEach((value, index) => {
          value.id = index + 1;
        });
      }
    }


    return {
      getGoodsName,
      StockReportColumns,
      computedData,
      box,
      funPrintPDF,
      columnsInsert,
      boxAddRows,
      // Mycolor: ["red", "green", "purple", "orange", "primary", "teal", "white"],
      boxRowDelete,
      yesExportIsNorm,
      boxGoodsSizeIsNorm,
      UIinsertPurchaseOrder,
      returnStyleOptions,
      returnMaterialOptions,
    };
  },
};
const box = reactive({
  radio: "A5",
  isTrue: false, //确认
  isHeader: false, //智能提示卡片
  isPrompts: false, //开启智能提示
  boxDialog: false,
  succeed: false,
  succeedCount: null,
  isDialog: false, //输入错误消息框
  isErrRow: false, //输入不完整消息框
  errRowData: null, //输入不完整消息框内容
  boxIsShow: true,

  yesExport: "",
  yesExportOptions:["内销", "外销"],
  planDate: null,
  customerPurchaseOrderId: "",
  purchaseOrderId: "PO20231111111",
  supplierName: "",

  goods: "",
  goodsName: "",
  goodsSize: null,
  purchaseOrderQuantity: null,



  forProductName: "",
  purchaseOrderCustomerMark: "",

  boxRows: [
    {
      id: 1,
      goodsName: "",
      goodsMaterial: "默认",
      goodsStyle: "",
      goodsSize: "",
      purchaseOrderQuantity: null,
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 2,
      goodsName: "",
      goodsMaterial: "默认",
      goodsStyle: "",
      goodsSize: "",
      purchaseOrderQuantity: null,
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 3,
      goodsName: "",
      goodsMaterial: "默认",
      goodsStyle: "",
      goodsSize: "",
      purchaseOrderQuantity: null,
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 4,
      goodsName: "",
      goodsMaterial: "默认",
      goodsSize: "",
      goodsStyle: "",
      purchaseOrderQuantity: null,
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 5,
      goodsName: "",
      goodsMaterial: "默认",
      goodsSize: "",
      goodsStyle: "",
      purchaseOrderQuantity: null,
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 6,
      goodsName: "",
      goodsMaterial: "默认",
      goodsSize: "",
      goodsStyle: "",
      purchaseOrderQuantity: null,
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
    {
      id: 7,
      goodsName: "",
      goodsMaterial: "默认",
      goodsSize: "",
      goodsStyle: "",
      purchaseOrderQuantity: null,
      forProductName: "",
      purchaseOrderCustomerMark: "",
    },
  ],
  goodsOptions: ["普通木箱", "SMR木箱", "托盘"],
  boxOptions: ["分块叠高", "整条叠高", "实木"],
  SMROptions: [
    "SMR-30",
    "SMR-35",
    "SMR-40",
    "SMR-45",
    "SMR-50",
    "SMR-60",
    "SMR-70",
    "SMR-80",
    "SMR-100",
    "SMR-125",
    "SMR-203",
    "SMR-B",
    "SMR-C",
    "SMR-D",
    "SMR-E",
    "SMR-F",
    "SMR-G",
    "SMR-H",
    "SMR-J",
    "SMRY-2",
    "SMRY-3",
    "SMRY-4",
    "SMRY-5",
    "SMRY-6",
    "SMRY-7",
    "SMRY-8",
    "SMRY-9",
    "SMRY-10",
    "SMRY-12",
  ],
  trayOptions: ["有盖板", "无盖板"],
  boxMaterialOptions: ["默认", "默认"],
  SMRMaterialOptions: ["默认", "默认"],
  trayMaterialOptions: ["默认", "默认"],
    supplierOptions: ["欣邦", "永欣","嘉辉","德少","其他"],
  cards_data: [],

  purchaseOrderIdList: [],
});


</script>
<style>
.title_font {
  color: rgb(17, 17, 19);
  font-size: 14px;
  font-weight: bolder;
}

.but_float {
  margin-right: 2%;
  float: right;
}

.my-card {
  width: 78.5%;
  height: 35%;
}
</style>
